<nz-layout class="app-layout">

  <!-- 导航栏 -->
  <nz-header>
    <!-- 顶部文件菜单 -->
    <div [@menuOpenClose]="ctx.enableTopMenu ? 'open' : 'closed'" class="top-file-menu">
      <!-- 退出顶部菜单 -->
      <button (click)="ctx.quitTopMenu()" class="menu-trigger" nz-button
              nzSize="large" nzType="text" style="top: -1px">
        <i [nzIconfont]="'icon-fanhui'" nz-icon></i>
      </button>
      <button class="filename-trigger"
              nz-button nzSize="large" nzType="text">
        {{ctx.currentFile?.filename}} ({{viewService.humanReadable(ctx.currentFile?.size)}})
      </button>

      <!-- 删除文件 -->
      <button class="menu-trigger right" nz-button nzSize="large" nzType="text">
        <i [nzIconfont]="'icon-shanchu'" nz-icon></i>
      </button>
      <!-- 移动文件 -->
      <button class="menu-trigger right" nz-button nzSize="large" nzType="text">
        <i [nzIconfont]="'icon-yidong'" nz-icon></i>
      </button>
      <!-- 编辑文件 -->
      <button *ngIf="viewService.isEditable(ctx.currentFile) && !ctx.enableMultipleChoice"
              class="menu-trigger right" nz-button nzSize="large" nzType="text">
        <i [nzIconfont]="'icon-bianji'" nz-icon></i>
      </button>
      <!-- 分享文件 -->
      <button *ngIf="!ctx.enableMultipleChoice"
              class="menu-trigger right" nz-button nzSize="large" nzType="text">
        <i [nzIconfont]="'icon-fenxiang'" nz-icon></i>
      </button>
      <!-- 启用多选 -->
      <button #multiChoiceBtn (click)="toggleMultiChoice()"
              class="menu-trigger right" nz-button nzSize="large" nzType="text">
        <i [nzIconfont]="'icon-xuanqu'" nz-icon></i>
      </button>
      <!-- 下载文件 -->
      <button class="menu-trigger right" nz-button nzSize="large" nzType="text">
        <i [nzIconfont]="'icon-baocundaobendi'" nz-icon></i>
      </button>
      <!-- 打开文件 -->
      <button *ngIf="!ctx.enableMultipleChoice"
              class="menu-trigger right" nz-button nzSize="large" nzType="text">
        <i [nzIconfont]="'icon-dakai'" nz-icon></i>
      </button>
    </div>

    <div class="app-header">
      <!-- 切换侧边菜单显示状态(显示 或 消失) -->
      <span (click)="toggleSideBar()" class="header-trigger left">
        <i [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" class="trigger left" nz-icon></i>
      </span>
      <!-- 应用名 -->
      <span class="header-trigger left">
        <span class="trigger logo left" routerLink="/home/file">Kami NAS</span>
      </span>

      <!-- 文件搜索框 -->
      <input class="search-input-div left" nz-input nzSize="large" placeholder="input-search-file ..."/>

      <!-- 头像 -->
      <span class="header-avatar right">
        <nz-avatar class="right" nzText="U"></nz-avatar>
      </span>

      <!-- 主题切换 -->
      <span (click)="toggleTheme()" class="header-trigger right">
        <i class="trigger right" nz-icon nzTheme="outline" nzType="skin"></i>
      </span>
    </div>
  </nz-header>

  <!-- 内容区域 -->
  <nz-layout>
    <!-- 侧边菜单区域 -->
    <nz-sider [(nzCollapsed)]="isCollapsed"
              [nzCollapsedWidth]="0"
              [nzTrigger]="null"
              class="menu-sidebar"
              nzBreakpoint="lg"
              nzCollapsible
              nzWidth="256px">
      <!-- 菜单标题以及菜单项 -->
      <nz-layout style="height: 100%">
        <!--        <nz-header></nz-header>-->
        <nz-content>
          <ul [nzInlineCollapsed]="isCollapsed" nz-menu nzMode="inline">
            <li nz-submenu nzIcon="star" nzOpen nzTitle="我的文件">
              <ul>
                <li nz-menu-item nzMatchRouter>
                  <i [nzIconfont]="'icon-wenjianleixing-suolvetu-shipinwenjian'" nz-icon></i>
                  <span routerLink="./videos">视频</span>
                </li>
                <li nz-menu-item nzMatchRouter>
                  <i [nzIconfont]="'icon-wenjianleixing-suolvetu-tupianwenjian'" nz-icon></i>
                  <span routerLink="./picture">图片</span>
                </li>
                <li nz-menu-item nzMatchRouter>
                  <i [nzIconfont]="'icon-wenjianleixing-suolvetu-shengyinwenjian'" nz-icon></i>
                  <span routerLink="./audio">音频</span>
                </li>
                <li nz-menu-item nzMatchRouter>
                  <i [nzIconfont]="'icon-wenjianleixing-suolvetu-Word'" nz-icon></i>
                  <span routerLink="./document">文档</span>
                </li>
              </ul>
            </li>
          </ul>
        </nz-content>
        <nz-footer class="space-display">
          <div class="space-progress">
            <nz-progress [nzPercent]="percent" [nzShowInfo]="false" [nzStatus]="state"></nz-progress>
            <span>{{viewService.humanReadable(used)}} / {{viewService.humanReadable(total)}}</span>
          </div>
        </nz-footer>
      </nz-layout>
    </nz-sider>

    <!-- 实际内容区 -->
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>

  </nz-layout>
</nz-layout>
